<template>
  <div>
    <div style="display: inline-block; width: 100%">
      <span v-show="buttons.includes('add')"
        ><el-button type="primary" size="small" @click="handleAdd">{{
          $t("common.new")
        }}</el-button></span
      >
      <span style="margin-left: 10px" v-show="buttons.includes('delete')"
        ><el-button type="danger" size="small" @click="handleDelete">{{
          $t("common.delete")
        }}</el-button></span
      >
      <span style="margin-left: 10px" v-show="buttons.includes('submit')"
        ><el-button type="warning" size="small" @click="handleSubmit"
          >保存</el-button
        ></span
      >
      <span style="margin-left: 10px" v-show="buttons.includes('aprrove')"
        ><el-button
          type="warning"
          size="small"
          @click="() => handleApprove(true)"
          >审核</el-button
        ></span
      >
      <span style="margin-left: 10px" v-show="buttons.includes('unaprrove')"
        ><el-button
          type="warning"
          size="small"
          @click="() => handleApprove(false)"
          >反审核</el-button
        ></span
      >

      <span style="margin-left: 10px" v-show="showMoreButton">
        <el-dropdown @command="handleCommand">
          <el-button>
            更多<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              command="export"
              icon="el-icon-download"
              v-show="buttons.includes('export')"
              >导出</el-dropdown-item
            >
            <el-dropdown-item
              command="import"
              icon="el-icon-upload2"
              v-show="buttons.includes('import')"
              >导入</el-dropdown-item
            >
            <el-dropdown-item
              command="print"
              icon="el-icon-printer"
              v-show="buttons.includes('print')"
              >打印</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </span>
      <span style="margin-left: 10px" v-show="buttons.includes('search')">
        <el-button
          icon="el-icon-search"
          circle
          size="small"
          @click="handleSearch"
        ></el-button>
      </span>
      <span style="margin-left: 10px; float: right"
        ><el-link class="el-icon-refresh" @click="handleRefresh">{{
          $t("common.refresh")
        }}</el-link></span
      >
      <span
        style="margin-left: 10px; float: right"
        v-show="buttons.includes('log')"
        ><el-link class="el-icon-notebook-2" @click="handleShowLog">日志</el-link></span
      >
      <span
        style="margin-left: 10px; float: right"
        v-show="buttons.includes('back')"
        ><el-link class="el-icon-back" @click="handleReturnList">返回列表</el-link></span
      >
    </div>

    <div v-show="showSearch" style="padding-top: 10px; padding-bottom: 10px">
      <slot name="search-slot"> </slot>
    </div>

    <el-drawer
      direction="rtl"
      :visible.sync="logDrawer"
      :with-header="false"
      size="40%"
    >
      <div v-if="logDrawer">
        <log-panel :moduleCode="moduleCode" :objectId="objectId"></log-panel>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import logPanel from "@/views/logs/operationlog.vue";
export default {
  components: {
    logPanel,
  },
  data() {
    return {
      showSearch: false,
      logDrawer: false,
    };
  },
  methods: {
    handleAdd() {
      this.$emit("add");
    },
    handleEdit(id) {
      this.$emit("edit");
    },
    handleDelete() {
      let selectedDatas = this.table.selection;
      if (!selectedDatas || selectedDatas.length == 0) {
        this.$alert(this.$t("tips.noSelectedRow"), this.$t("common.tips"), {
          confirmButtonText: this.$t("common.ok"),
        });
        return;
      }
      this.$confirm(this.$t("tips.confirmDelete"), this.$t("common.tips"), {
        confirmButtonText: this.$t("common.ok"),
        cancelButtonText: this.$t("common.cancel"),
        type: "warning",
      })
        .then(() => {
          let ids = selectedDatas.map((data) => {
            return data.id;
          });
          this.$emit("delete", { ids: ids, rows: selectedDatas });
        })
        .catch(() => {});
    },
    handleRefresh() {
      this.$emit("refresh");
    },
    handleSubmit() {
      this.$emit("submit");
    },
    handleReturnList() {
      this.$emit("back");
    },
    handleSearch() {
      this.showSearch = !this.showSearch;
    },
    handleApprove(approved) {
      this.$emit("approve", approved);
    },
    handleShowLog() {
      this.logDrawer = true;
    },
    handleCommand(command) {
      this.$emit(command);
    },
  },
  mounted() {},
  computed: {
    showMoreButton() {
      return (
        this.buttons &&
        (this.buttons.includes("import") ||
          this.buttons.includes("export") ||
          this.buttons.includes("print"))
      );
    },
  },
  props: {
    table: {
      type: Object,
      default: () => null,
    },
    buttons: {
      type: Array,
      default: () => ["add", "delete", "search" ,"log"],
    },
    moduleCode: {
      type: String,
      default: null,
    },
    objectId: {
      type: String,
      default: null,
    },
  },
};
</script>
<style scoped></style>
